<template>
  <div class="xz-box">
    <van-nav-bar title="选择号源" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="xz-top">
      <p class="shen">神经外科</p>
      <p class="hang">航空总医院</p>
      <div class="tabar">
        <div class="time" v-for="(item, index) in data" :key="index">
          <div @click="tabs(index)" :class="tabindex === index ? 'tab' : ''" class="tabs">
            <div class="tab1">{{ item.mon }}</div>
            <div>{{ item.time }}</div>
            <div :class="item.hao == true ? 'you' : ''">{{ item.hao == true ? '有号' : '无号' }}</div>
          </div>
        </div>
        <div class="quan">全部日期<van-icon name="arrow-down" /></div>
      </div>
      <van-notice-bar
        wrapable
        :scrollable="false"
        text="08:30放12月30日号源，是否有号以医院实际排班为准"
        class="notice"
      />
    </div>
    <div class="xz-center">
      <div class="xz-c-left">
        <img :src="list.img" alt="" />
      </div>
      <div class="xz-c-right">
        <div>
          <span class="xz-c-name">牛建星</span><span class="xz-c-zhi">副主任医师</span
          ><button class="xz-c-btn" @click="togh">去挂号</button>
        </div>
        <div class="xz-c-spans">
          <span>神经外科</span><span class="xz-c-l">|</span><span>{{ list.hospital }}</span>
        </div>
        <div class="xz-c-s">
          {{ list.brief }}
        </div>
      </div>
    </div>
    <p class="xz-p">其他相同科室医生</p>
    <div class="xz-bottom">
      <div class="xz-b1" v-for="(item,index) in lists" :key="index">
        <div class="xz-b-left">
          <img
            :src="item.avatar"
            alt=""
          />
        </div>
        <div class="xz-b-right">
          <div>
            <span class="xz-b-name">{{ item.name }}</span><span class="xz-b-zhi">{{ item.position }}</span
            ><button class="xz-b-btn" @click="togh(item)">去挂号</button>
          </div>
          <div class="xz-b-spans">
            <span>神经外科</span><span class="xz-b-l">|</span><span>重庆市人民医院</span>
          </div>
          <div class="xz-b-s">擅长：{{ item.brief }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = ref([
  {
    mon: '周二',
    time: '12-24',
    hao: true,
  },
  {
    mon: '周三',
    time: '12-25',
    hao: true,
  },
  {
    mon: '周四',
    time: '12-26',
    hao: true,
  },
  {
    mon: '周五',
    time: '12-27',
    hao: true,
  },
  {
    mon: '周六',
    time: '12-28',
    hao: false,
  },
])
// 日期
const date = new Date().getDate()
console.log(date)
// 月份
const month = new Date().getMonth() + 1
// 星期
const week = new Date().getDay()
console.log(week)
console.log(month)
const tabindex = ref(0)
const tabs = (index) => {
  console.log(index)
  tabindex.value = index
}
const togh = async() => {
  await axios.get('/api/registration',{params:{id:route.query.id}}).then((res)=>{
    console.log(res)
  })
  router.push('/order')

  // await axios.get('/api/registration',{params:{id:route.query.id}}).then((res)=>{
  //   console.log(res)
  //   router.push('/order')
  // })

  // localStorage.setItem('register',JSON.stringify(item))
  // router.push('/order')
}

import { useRoute } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const list = ref([])
const lists = ref([])
const id = ref(route.query.id)
const listdata = async () => {
  await axios.get('/api/registration', { params: { id: id.value } }).then((res) => {
    console.log(res.data.data[0])
    list.value = res.data.data[0]
    console.log(list.value)
    lists.value = res.data.data[0].doctors
    // console.log(lists.value)
  })
}
listdata()
const onClickLeft = () => history.back()
</script>

<style scoped>
.shen {
  margin-left: 30px;
  padding-top: 20px;
  font-size: 30px;
  color: #464646;
  font-weight: 600;
}
.hang {
  margin-left: 30px;
  margin-top: 10px;
  font-size: 23px;
  color: #aeaeae;
}
.tabar {
  width: 100%;
  display: flex;
  position: relative;
}
.time {
  width: 13%;
  margin-left: 30px;
}
.tabs {
  width: 100%;
  text-align: center;
  border-radius: 10px;
  background-color: #f6f6f6;
}
.tabs > div {
  line-height: 40px;
}
.tab1 {
  margin-top: 20px;
}
.tab {
  color: #fff;
  background-color: #00c188;
}
.tab>div{
  color: #fff;
}
.quan {
  width: 10%;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #edeff2;
  position: absolute;
  right: 10px;
  top: 25px;
  font-size: 25px;
  text-align: center;
  padding-top: 5px;
}
.notice {
  width: 90%;
  height: 60px;
  margin-left: 5%;
  margin-top: 20px;
  font-size: 24px;
  color: #ffac0c;
  /* text-align: center; */
  padding-left: 50px;
  border-radius: 10px;
}
.xz-box {
  width: 100%;
  height: 1332px;
  background-color: #f5f5f5;
}
.xz-top {
  width: 100%;
  height: 340px;
  background-color: #fff;
}
.xz-center {
  width: 100%;
  height: 210px;
  background-color: #fff;
  margin-top: 20px;
  display: flex;
}
.xz-c-left {
  width: 20%;
  /* background-color: #ccc; */
}
.xz-c-left > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 30px;
  margin-top: 30px;
}
.xz-c-right {
  padding-top: 20px;
  margin-left: 20px;
}
.xz-c-right > div {
  width: 95%;
  margin-bottom: 10px;
  font-size: 28px;
  color: #686868;
}
.xz-c-name {
  font-size: 30px;
  font-weight: 600;
  color: #000;
}
.xz-c-zhi {
  font-size: 25px;
  font-weight: 600;
  margin-left: 20px;
  color: #000;
}
.xz-c-btn {
  padding: 10px 20px;
  float: right;
  border-radius: 30px;
  border: none;
  color: #fff;
  background-color: #00c087;
  font-size: 26px;
  margin-top: 5px;
}
.xz-c-l {
  margin: 0 15px;
}
.you{
  color: #29D5AE;
}
.xz-p {
  margin: 20px 40px;
  font-size: 30px;
  font-weight: 600;
}
.xz-bottom {
  width: 90%;
  margin-left: 5%;
}
.xz-b1 {
  width: 100%;
  height: 180px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  margin-bottom: 20px;
}
.xz-b-left {
  width: 20%;
}
.xz-b-l{
  margin: 0 15px;
}
.xz-b-left > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 30px;
  margin-top: 20px;
}
.xz-b-right {
  margin-left: 20px;
  padding-top: 20px;
  font-size: 23px;
  color: #686868;
}
.xz-b-name {
  font-size: 30px;
  font-weight: 600;
  color: black;
}
.xz-b-zhi {
  margin-left: 20px;
  font-size: 25px;
  font-weight: 600;
  color: #000;
}
.xz-b-btn {
  padding: 10px 20px;
  position: absolute;
  right: 70px;
  border-radius: 25px;
  font-size: 27px;
  border: none;
  color: #fff;
  background-color: #00c087;
}
.xz-b-spans {
  margin-bottom: 10px;
}
.xz-b-s {
  width: 96%;
}
a{
  font: 100;
  font-family: serif;
  font-style: italic;
  font-feature-settings: "aalt";
  font-feature-settings: "aalt";
  font: 1em sans-serif;
}
</style>
